<template>
  <div>
    <ul>
      <!-- <li> <router-link to="/contacts/secondall">All_contacts</router-link></li>
        <li><router-link to="/contacts/secondalice">Alice</router-link></li>
        <li><router-link to="/contacts/Secondbob">Bob</router-link></li>
  -->
      <li>
        <a href="#" @click.prevent="fn1">All_contacts</a>
      </li>
      <li><a href="#" @click.prevent="fn2">Alice</a></li>
      <li><a href="#" @click.prevent="fn3">Bob</a></li>
    </ul>
     <button @click="random">随机显示</button>
    <router-view></router-view>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
       arr:[
        '/contacts/secondall',
        '/contacts/secondalice',
        '/contacts/Secondbob'
       ]
    }
  },
  methods: {
    fn1() {
      this.$router.push({
        path: this.arr[0],
      })
    },
    fn2() {
      this.$router.push({
        path:this.arr[1],
      })
    },
    fn3() {
      this.$router.push({
        path:this.arr[2],
      })
    },
    random(){
        const index =Math.floor(Math.random()*3)
          this.$router.push({
            path:this.arr[index]
          })
    }
  },
}
</script>

<style></style>
